<template>
  <div class="cars">
    <div class="top">
      <svg-icon iconClass="back" @click="$router.push('/layout')"/>
      <p>购物车</p>
      <span></span>
    </div>

    <main>
      <dl v-for="item in detaillist" :key="item.id">
      <input type="checkbox" class="xz" />
      <dt>
        <img src="@/img/1.png" alt="" style="height:50px"/>
      </dt>
      <dd>
        <p>{{ item.title }}</p>
        <p>{{ item.hh }}</p>

        <p class="lll">
          <b>￥{{ item.price }}</b>
          <button @click="jiannun()">-</button><span>x{{ count }}</span
          ><button @click="addnum()">+</button>
        </p>
      </dd>
    </dl>
    </main>
    <van-goods-action>
      <van-goods-action-icon icon="" text="" @click="onClickIcon()" />
      <van-goods-action-icon icon="" text="" @click="onClickIcon()" />
      <van-goods-action-icon icon="" text="" @click="onClickIcon()" />
      <van-goods-action-button
        type="danger"
        text="提交订单"
        @click="onClickButton()"
      />
    </van-goods-action>
    <!-- <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" /> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  created() {
    /* this.$store.dispatch("addcar"); */
  },
  computed: {
    detaillist() {
      return this.$store.state.detaillist;
    },
  },
  methods: {
    addnum() {
      this.count++;
    },
    jiannun() {
      this.count--;
    },
    onClickIcon(){

    },
    onClickButton(){
      this.$router.push("/pay")
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
* {
  margin: 0;
  padding: 0;
}
main{
  padding-bottom: px2rem(70);
}
.top {
  width: 100%;
  height: px2rem(50);
  line-height: px2rem(50);
  text-align: center;
  background: linear-gradient(to right, #f62c2c, #f86329);
  position: sticky;
  top: 0;
  left: 0;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 px2rem(15);
  font-size: px2rem(18);
  p {
    text-align: center;
    font-size: $titleSize;
    /* margin-left: px2rem(150); */
  }
}
.cars {
  background: #ccc;
  font-size: px2rem(13);
  dl {
    display: flex;
    background: #fff;
    margin-top: px2rem(10);
    width: 95%;
    border-radius: px2rem(8);
    margin-left: px2rem(10);
    dt {
      padding: px2rem(10);
    }
    dd {
      margin-top: px2rem(10);
    }
  }
  b {
    color: red;
    margin-right: px2rem(20);
  }
  .lll {
    margin-left: px2rem(100);
  }
  button {
    width: px2rem(25);
    border-radius: px2rem(8);
    border: none;
  }
  .xz {
    margin-left: px2rem(5);
    margin-top: px2rem(10);
  }
}
</style>